<template>
  <div class="transaction-details">
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" />
      <h2 style="margin: auto">充值明细</h2>
    </div>
    <div class="tab-bar">
      <van-tabs v-model="activeTab">
        <van-tab title="充值明细" name="充值" />
        <van-tab title="消费明细" name="消费" />
        <van-tab title="返佣明细" name="返佣" />
      </van-tabs>
    </div>
    <div class="transaction-list">
      <div class="transaction-item" v-for="(item, index) in transactions" :key="index">
        <span class="transaction-type">{{ item.type }}</span>
        <span class="transaction-amount">{{ item.amount }}</span>
        <span class="transaction-time">{{ item.time }}</span>
        <span class="transaction-balance">{{ item.balance }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, Icon } from 'vant';
import { onMounted } from 'vue';
import axios from 'axios';

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Icon.name]: Icon
  },
  data() {
    return {
      activeTab: 'recharge',
      transactions: []
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.activeTab = to.query.tab || 'recharge'; // 根据查询参数设置 activeTab，默认为 'recharge'
    });
  },
  async created() {
    try {
      const response = await axios.get('/api/transactions'); // 假设你有一个后端 API 地址为 /api/transactions 来获取交易数据
      this.transactions = response.data;
    } catch (error) {
      console.error('获取交易数据失败:', error);
    }
  }
};
</script>


<style scoped>
.transaction-details {
  background-color: white;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.time {
  font-size: 14px;
}
.battery {
  font-size: 14px;
}
.tab-bar {
  border-bottom: 1px solid #ccc;
}
.transaction-list {
  padding: 10px;
}
.transaction-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}
</style>
